Foto's bewerken met Photoshop Elements: deel 5 


Fotogalerij voor web 


De tijd van gortdroge webpagina's zonder enige grafische verluchting ligt 


goddank ver achter ons. Toch moeten surfers een prijs voor deze plaatjes 
betalen in de vorm van downloadtijd. 
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TD Lokale machinezone 


Deze workshop volgen loont: we hebben een Adobe Photoshop 6-pakket 
(winkelwaarde € 1188,81) èn 3 exemplaren Adobe Photoshop Elements 
(winkelwaarde € 148,75/ex.) liggen voor de lezers die de beste beeldanimatie 
maken voor en over Clickx Magazine. We herinneren je er graag aan dat je in- 
zending ons moet bereiken vóór 28 mei. De volledige uitleg over deze super- 


wedstrijd kan je lezen in Clickx Magazine nr. 11 van 11 maart. 
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Drie vuistregels 


Onthoud daarom drie vuistregels: 


A. Het heeft geen zin om plaatjes aan een hogere resolutie dan 72 
pixels/inch (of dpi) op het web te plaatsen. Je kan foto’s met 150 dpi of 
hoger publiceren, maar vermits de meeste beeldschermen deze 
afbeeldingen tonen met 72 dpi (schermresolutie) zou dat een onver- 
antwoorde vorm van overkill zijn. Plaatjes die met een hogere reso- 
lutie werden gefotografeerd of ingescand, breng je naar 72 dpi met de 
opdracht: AFBEELDING — FORMAAT WIJZIGEN — AFBEELDINGSGROOTTE. 
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[4 Verhoudingen behouden 


Nieuwe beeldpbtels berekenen: (Bicubisch +) 


Breng je foto naar 72 pixels/inch. 


B. Er zijn nog steeds webbouwers die afbeeldingen verkleinen in 
hun webeditor. Je kan inderdaad grote afbeeldingen laten schalen 
door middel van een bepaalde html-code. Doe dat niet! Hoewel de 
bezoeker het verkleinde plaatje te zien krijgt, zal het origineel (de 
grote versie dus) ingeladen worden. 

C. Alle grafische bestandsformaten voor het web hebben één ding 
gemeen: compressie. Kies het juiste compressie-formaat. De meest 
voorkomende grafische bestandsformaten die door browsers ge- 
lezen kunnen worden, zijn jpeg en gif. peg-bestanden kunnen mil- 
joenen kleuren bevatten, gif ondersteunt 256 kleuren. Volledig- 
heidshalve vermeld ik nog het png-formaat (Portable Network Grap- 
hics) dat eigenlijk superieur is aan de twee eerstgenoemde. Hoe- 
wel Photoshop Elements png wel ondersteunt, wordt het nog niet 
herkend door alle browsers. 

Gifs zijn uitstekend voor grafische bestanden waarin zich grote 
vlakken van dezelfde kleur bevinden zoals cartoons, logo's, teke- 
ningen. Bovendien kan je met die plaatjes ook animaties maken, 
maar daarover volgende les meer. 

Jpeg kiezen we wanneer er veel nuance en kleurovergang te zien 
is zoals bij foto’s. 


Stap 2 
Je foto optimaliseren 


Om het optimaliseren zo gemakkelijk en tegelijk nauwkeurig mo- 
gelijk te maken, gebruiken we BESTAND - OPSLAAN VOOR HET WEB. 
In het dubbele afbeeldingsvenster dat je dan te zien krijgt, worden 
zowel het oorspronkelijke plaatje als de geoptimaliseerde versie ge- 
toond. In dit weergavevenster heb je drie gereedschappen ter be- 
schikking. Het handje om de afbeelding te verschuiven, het ver- 
grootglas om in of uit te zoomen en het pipet om een kleur te se- 
lecteren in de afbeelding. 


Wil je deze workshop zelf netjes overdoen 
van stap één tot stap laatst? Geen probleem: 
] staan de hier 
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Onderaan lees je dat de tif-versie die je oorspronkelijk gebruikt 710 
KB groot is, terwijl de jpeg-versie nog geen 37 KB is. Daaronder 
lees je dat het 14 seconden zou duren om dit plaatje met een 28 Kbit 
modem binnen te halen. Die vooropgestelde downloadtijd is na- 
tuurlijk een benadering. 
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Afbeeldingen opslaan voor het web. 


In de rechterbovenhoek van dit venster bevindt zich een klein drie- 
hoekje vanwaar je een andere modemsnelheid kan selecteren, zo- 
dat de downloadtijd opnieuw berekend wordt. Via hetzelfde drie- 
hoekje kan je een voorafbeelding vragen zoals de foto zou te zien 
zijn op diverse systemen. Doorgaans ziet een afbeelding op een 
Windows-systeem er donkerder uit dan op een Mac. 

Ik kies het jpeg-formaat voor webfoto’s, dat ondersteunt 24-bits 
kleuren en wordt door alle moderne webbrowsers herkend. Wan- 
neer een foto van 71o KB wordt afgeslankt tot een bestand van 37 
KB, worden er uiter- 
aard gegevens ver- 
wijderd. Jpeg wordt 
niet voor niets ‘com- 
pressie met verlies’ 
genoemd, of een ‘los- 
sy format’. Je kan de 
compressiekwaliteit 
in dit venster aan- 
passen. Hoe hoger 
de instelling, hoe 
minder gegevens 
worden verwijderd. De instellingen van je modem optimaliseren. 
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Wanneer je de compressie opvoert (dus een lage kwaliteit), kun- 
nen details verloren gaan, maar dankzij het dubbele venster blijf 
je zicht houden op het uiteindelijke resultaat. Op die manier be- 
paal je zelf het ideale compromis tussen afbeeldingskwaliteit en 
compressie. 
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aan de kwaliteits- 
graad, dan zal de 
naam van de instel- 
ling veranderen in 
EIGEN. De optie 
PROGRESSIEF bete- 
kent dat de foto in 
de webbrowser in lagen wordt geladen. De webbezoekers krijgen 
eerst een voorproefje in lage kwaliteit te zien alvorens de afbeel- 
ding geheel geladen is. De term ICC-PROFIEL verwijst naar de kleur- 
correctie die soms wordt gebruikt bij browsers. Via de optie RAND 
mag je, indien dat nodig zou zijn, een kleur selecteren die over- 
eenkomt met de achtergrond van de webpagina. 

De knop VOORVERTONING IN gebruiken we om een webbrowser te 
openen zodat je het plaatje zoals een surfer kan bekijken. 
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Instellingen voor optimalisatie. 
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Volgende Stop Vernieuw _Introductiepagina — Vul automatisch aan Print E-mail 


file :/ 7 /6G-HD/ Temporary B20Oltems /Opslaan®20voor B20web /Doelvoorvertoning_001 /Doelvoorvertoning html 
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Formaat: JPEG 

Afmetingen: 600w z 404h 

Grootte: 36,82 K 

Instellingen: Kwaliteit 1530, Progressief, Optimaal aan 


<HTML> 

<HEAD> 

<TITLE>Naamloos-1</TITLE> 

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1"> 
</HEAD> 

<BODY BGCOLOR="#FFFFFF "> 

<IMG NAME="Doelwoorwertoning" SRC="Doelvoorvertoning.jpg" WIDTH=600 HEIGHT=404> 
</BODY> 


</HTML> 
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Photoshop Elements kan de geoptimaliseerde afbeelding voorver- 
tonen in elke browser die op je computer is geïnstalleerd. De brow- 
ser presenteert dan de afbeelding met een bijschrift van twee ali- 
nea’s. In de eerste alinea lees je het bestandstype, de grootte in 
pixels, de bestandsgrootte en de compressie-instellingen. In de 
tweede alinea staan de html-gegevens. 
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Je kan een html-bestand aanmaken. 


Sla de geoptimaliseerde afbeelding op door op de OK-knop te klik- 
ken. Kies een bestandsnaam en een locatie voor het geoptimali- 
seerde bestand. Je hebt daarbij de mogelijkheid om een html-be- 
stand aan te maken dat de code bevat waarin de geoptimaliseerde 
webafbeelding wordt weergegeven. Schakel HTML-BESTAND OP- 
SLAAN uit wanneer je alleen een afbeeldingsbestand wil bewaren. 


Stap 3 
Je eigen webgalerij 


Je kan deze foto’s stuk voor stuk publiceren, maar het einde is 
natuurlijk een professioneel ogende webgalerij. Je kent ze wel, de 
pagina’s die eerst in postzegelformaat (of thumbnail) worden 
geëtaleerd. 
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gl file: 7 /60-HD /Desktop%zOFolder /webgaler ij / index.htm ?awe220800 aa 
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Hoe ziet de afbeelding eruit in je browser? 
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Afbeeldingen als thumbnails. 


Op klikbevel openen ze afzonderlijke webpagina's waar het scherm- 
vullende werk te bewonderen is. Geloof me, het is een tijdrovende 
klus om miniatuurtjes te maken en alles netjes in html te schrij- 
ven. Als je daarbovenop een navigatiestructuur wil waarbij alle ga- 
leriepagina’s naar elkaar verwijzen zonder dat je telkens terug naar 
het thumbnailoverzicht moet, ben je enkele uren zoet. 

Photoshop Elements neemt dit monnikenwerk voor zijn rekening 
in één enkele opdracht: BESTAND - AUTOMATISCH -WEBFOTOGALERIE. 
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Kies een van de vier galeriestijlen. 


In het keuzevenster dat je dan te zien krijgt, klik je onder BEsTAN- 
DEN op BRON. Daar selecteer je de map waarin de afbeeldingen staan 
die in de galerie moeten worden opgenomen. Indien je ook alle 
plaatjes wil gebruiken die in eventuele submappen staan, selecteer 
je INCLUSIEF ALLE SUBDIRECTORY'S. 

Vervolgens kies je een doelmap. Hierin zullen de afbeeldingen, de 
thumbnails en de html-pagina’s van de galerie worden opgeslagen. 
Bij STIJLEN krijg je een voorvertoning van de vier galeriestijlen: Een- 
voudig, Horizontaal Kader, Tabel, Verticaal kader. 

De verdere instellingsopties werden gegroepeerd in vier onder- 
delen: Banner, Galerie-afbeeldingen, Galerie-miniaturen, Eigen 
kleuren. Bekijk deze instellingen stuk voor stuk. Wees gerust, ze 
wijzen zichzelf uit. 

Je kan hier een titel voor de galerie opgeven, de naam van de foto- 
graaf, de datum die op elke pagina van de galerie moet komen, be- 
palen of er een kader rond de foto’s komt, of de afbeeldingen ver- 
kleind moeten worden, of er nog verdere compressie moet worden 
toegepast. Bij Fonts en Corps bepaal je hoe de tekst er moet uit- 
zien. Kies het aantal kolommen en rijen waarin de miniaturen moe- 
ten worden geplaatst. Ten slotte kan je nog een andere kleur se- 
lecteren voor achtergrond, tekst, koppelingen enz… Nadat je door 
deze instellingen heen bent, laat je met een klik op de knop OK de 
automatische piloot in actie schieten. 


Na enkele seconden heeft Photoshop alle plaatjes en de nodige 

html-pagina’s aangemaakt. Alle elementen worden in de doelmap 

geplaatst: 

- een homepage voor de galerie: Index.htm (deze pagina wordt 
automatisch geopend in de browser); 

- de jpeg-afbeeldingen in de submap ‘images’; 

- de html-paginabestanden in de submap ‘pages’; 

- de jpeg-miniatuurafbeeldingen in de submap ‘miniaturen’; 

-_ de hulpbestanden FrameSet.htm (bij het gebruik van frames) en 
UserSelections.txt. 


FrameSet.htm images 
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miniaturen pages UserSelectians. txt 


Alles staat netjes in de doelmap. 


In onze browser ziet het er pico bello 
uit. Dit noemen we pas webfoto- 
galerijen maken volgens ons favoriete 
economische principe van het maxi- 
mum rendement met de minste in- 
spanning. 

— Dirk Schoofs — 


Dpi: (dots per inch) Aantal punten per duim (een duim is een 
Engelse lengtemaat en komt overeen met 2,54 cm). Hiermee wordt 
de resolutie van een printer (of een scanner) uitgedrukt. Een 
toestel met een resolutie van 600 bij 600 dpi drukt dus zowel 
horizontaal als verticaal 600 punten over een afstand van 2,54 cm. 
Hoe hoger de resolutie, hoe beter de kwaliteit van de afdruk. 


Gif: (Graphics Interchange Format) Een gecomprimeerd formaat 
van afbeeldingen met maximaal 256 kleuren. 


Html: (Hypertext markup language) Een soort taal die tekst, 
afbeeldingen, links enzovoort in webpagina's giet. 


Jpg: Een grafisch bestandsformaat dat vaak wordt gebruikt op het 
internet. Dit formaat maakt gebruik van een speciaal compressie- 
mechanisme waardoor de plaatjes nòg kleiner kunnen worden 
gemaakt. 


Pixel: (Picture Element) Ook wel beeldpunt genoemd. Het is de 
kleinste eenheid waaruit een beeldscherm is opgebouwd. Een 
resolutie van 800 bij 600 betekent dat een scherm horizontaal 
800 en verticaal 600 pixels kan afbeelden. 


Png: (Portable Network Graphics) Een bestandsformaat dat 
speciaal voor het web ontworpen werd en flexibeler is dan het 
veelgebruikte gif-formaat. Het wordt in de toekomst wellicht het 
standaardformaat op het web. 


Resolutie: Een term om de kwaliteit en scherpte van een beeld, 
een foto of een afdruk uit te drukken. 


Tif: (Tagged Image File). Een bestandsformaat dat speciaal is ont- 
worpen voor lay-outtoepassingen en dat door vrijwel alle grafische 
programma’s wordt ondersteund. Tif-bestanden zijn wel tamelijk 
‘zwaar’. 
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